<script setup lang="ts">
import { ref, computed } from 'vue'
import { NButton, NIcon, NModal, NSpin, NTag, NCheckbox } from 'naive-ui'
import { Plus, FileInvoice } from '@vicons/tabler'
import CustomTooltip from '@/components/CustomTooltip.vue'

const showModal = ref(false)
const handleAddContext = () => {
  showModal.value = true
}

const items = ref([
  { id: 1, icon: FileInvoice, text: '上下文1', tag: '管理员' },
  { id: 2, icon: FileInvoice, text: '上下文2', tag: '用户' },
  { id: 3, icon: FileInvoice, text: '上下文3', tag: '管理员' }
])

const selectedItems = ref<number[]>([])

const selectNumber = computed(() => selectedItems.value.length)

const toggleSelection = (id: number) => {
  const index = selectedItems.value.indexOf(id)
  if (index === -1) {
    selectedItems.value.push(id)
  } else {
    selectedItems.value.splice(index, 1)
  }
}

const handleConfirm = () => {
  // 这里可以添加确认逻辑，比如发送选中的项目到服务器
  console.log('Selected items:', selectedItems.value)
  showModal.value = false
}
</script>

<template>
  <div class="w-full p-4 rounded-lg bg-[#F9F9F9]">
    <div class="flex items-center justify-between mb-4">
      <div class="flex items-center">
        <n-icon size="20" :component="FileInvoice" color="#6938EF" />
        <span class="ml-2 text-lg font-medium mr-1">上下文 </span>
        <CustomTooltip content="上下文是用户在对话中提供的信息，可以用于生成更准确的回复。" placement="right"/>
      </div>
      <n-button quaternary @click="handleAddContext" size="small" class="rounded-lg">
        <template #icon>
          <n-icon size="13"><Plus /></n-icon>
        </template>
        添加
      </n-button>
    </div>
    <div class="mb-4 text-[#787878] text-sm text-center">变量能使用户</div>
  </div>

  <n-modal
    v-model:show="showModal"
    :style="{ width: '460px', top: 'calc(50% - 200px)' }"
    preset="card"
    title="编辑变量"
    :mask-closable="false"
    class="rounded-2xl"
  >
    <div class="w-full h-full p-4 min-h-[160px]">
      <div v-if="false" class="w-full h-full flex items-center justify-center">
        <NSpin />
      </div>
      <div class="w-full h-full flex flex-col gap-2">
        <div
          v-for="item in items"
          :key="item.id"
          class="w-full flex items-center justify-between border-1px border-solid border-[#E9E9E9] px-4 py-2 rounded-xl hover:bg-[#F5F8FF] hover:border-[#528BFF] cursor-pointer transition-all duration-200"
          :style="
            selectedItems.includes(item.id)
              ? { backgroundColor: '#f1f9ff', border: '1px solid #528BFF' }
              : {}
          "
          @click="toggleSelection(item.id)"
        >
          <div class="flex items-center justify-center gap-[2px]">
            <div class="flex items-center justify-center bg-[#F5F8FF] p-[5px] rounded-lg">
              <n-icon size="15" :component="item.icon" color="#6938EF" />
            </div>
            <span class="ml-2 text-[12px] font-medium">{{ item.text }}</span>
          </div>
          <div class="flex items-center gap-2">
            <n-tag size="small" class="rounded-lg">{{ item.tag }}</n-tag>
          </div>
        </div>
      </div>
    </div>

    <div class="w-full flex justify-between items-center bg-white">
      <div class="text-[#787878] text-sm flex items-center">{{ selectNumber }} 个知识库被选择</div>
      <div class="flex gap-2 items-center justify-end">
        <n-button class="rounded-xl px-4 py-2" size="small" @click="showModal = false"
          >取消</n-button
        >
        <n-button class="rounded-xl px-4 py-2" size="small" type="primary" @click="handleConfirm"
          >确定</n-button
        >
      </div>
    </div>
  </n-modal>
</template>

<style scoped>
/* Add any additional styles here if needed */
</style>
